<template>
  <el-drawer
      v-model="show"
      size="800px"
      title="详情"
      direction="rtl"
      class="drawer">

    <el-row class="table">
      <el-col :span="4" class="title">请求时间:</el-col>
      <el-col :span="20" class="content">{{timestampToDateString(logRequest.createTime)}}</el-col>
    </el-row>
    <el-row class="table">
      <el-col :span="4" class="title">请求地址:</el-col>
      <el-col :span="20" class="content">{{logRequest.url}}</el-col>
    </el-row>
    <el-row class="table">
      <el-col :span="4" class="title">请求方式:</el-col>
      <el-col :span="20" class="content">{{logRequest.method}}</el-col>
    </el-row>
    <el-row class="table">
      <el-col :span="4" class="title">时长(毫秒):</el-col>
      <el-col :span="20" class="content">{{logRequest.duration}}</el-col>
    </el-row>
    <el-row class="table">
      <el-col :span="4" class="title">ipv4:</el-col>
      <el-col :span="20" class="content">{{logRequest.ipv4}}</el-col>
    </el-row>
    <el-row class="table">
      <el-col :span="4" class="title">ipv6:</el-col>
      <el-col :span="20" class="content">{{logRequest.ipv6}}</el-col>
    </el-row>
    <el-row class="table">
      <el-col :span="4" class="title">所在地区:</el-col>
      <el-col :span="20" class="content">{{logRequest.ipAddress}}</el-col>
    </el-row>
    <el-row class="table">
      <el-col :span="4" class="title">UA:</el-col>
      <el-col :span="20" class="content">{{logRequest.userAgent}}</el-col>
    </el-row>
    <el-row class="table">
      <el-col :span="4" class="title">请求头:</el-col>
      <el-col :span="20" class="content">
        <el-row class="lang-content">
          <pre>{{logRequest.headers}}</pre>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="table">
      <el-col :span="4" class="title">请求体:</el-col>
      <el-col :span="20" class="content">
        <el-row class="body-content force-wrap">{{logRequest.body}}</el-row>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script lang="ts" setup>
import {defineExpose, ref} from "vue"
import {timestampToDateString} from "@/core/util/date_util"

const show = ref(false)
const logRequest = ref({})

function showComp(log:any){
  show.value = true
  logRequest.value = log
}

defineExpose({
  showComp,
})
</script>

<style lang="scss" scoped>
.table{
  width: 100%;
  font-size: 15px;

  border-left: solid 1px #eceef6;
  border-top: solid 1px #eceef6;
  border-right: solid 1px #eceef6;

  &:last-child{
    border-bottom: solid 1px #eceef6;
  }

  .title{
    min-height: 40px;
    background-color: #f6f7fa;
    padding: 0 10px;
    border-right: solid 1px #eceef6;

    display: flex;
    align-items: center; /* 垂直居中 */
  }

  .content{
    padding: 5px 10px;

    display: flex;
    align-items: center; /* 垂直居中 */
  }

  .lang-content{
    width: 100%;
    overflow-x: auto;
    background-color: #1e1e1e;
    color: white;
    font-size: 14px;
    padding: 0 10px;
  }

  .body-content{
    width: 100%;
    background-color: #1e1e1e;
    color: white;
    font-size: 14px;
    padding: 10px 10px;
  }
}
</style>
